<template>
  <q-page style="min-height: 100%" class="q-pa-md">
    <div class="column items-center">
      <div class="col" style="font-size: 24px">Welcome!</div>
    </div>
    <ValidationObserver v-slot="{ invalid }">
      <q-form class="q-pa-md" @submit="login">
        <ValidationProvider
          name="Email"
          rules="required|email"
          v-slot="{ errors }"
        >
          <q-input
            class="q-mb-sm"
            bg-color="blue-grey-8"
            outlined
            v-model="email"
            label="Email"
            :error-message="errors[0]"
            :error="errors.length>0"
          />
        </ValidationProvider>
        <ValidationProvider
          name="Password"
          rules="required|password"
          v-slot="{ errors }"
        >
          <q-input
            outlined
            v-model="password"
            bg-color="blue-grey-8"
            type="password"
            label="PASSWORD"
            :error="errors.length>0"
            :error-message="errors[0]"
          />
        </ValidationProvider>
        <div class="find-password" @click="findPassword">Forgot your password?</div>
        <q-btn
          type="submit"
          :disable="invalid"
          color="primary"
          class="full-width q-mt-md"
          size="lg"
          @click="login"
        >LOGIN</q-btn>
      </q-form>
    </ValidationObserver>

    <div class="q-px-md login-methods">
      <div style="font-size:12px">OR LOG IN WITH</div>
      <div class="row justify-around q-my-sm">
        <div class="col" v-for="item in loginMethods" :key="item.name">
          <q-btn round>
            <q-avatar size="48">
              <q-img :src="item.src" />
            </q-avatar>
          </q-btn>
        </div>
      </div>
      <div style="font-size: 10px">
        Need an account?
        <span class="register" @click="onRegisterClick">Register</span>
      </div>
    </div>
  </q-page>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
const electron = require('electron');
@Component({})
export default class Login extends Vue {
  private email = '';
  private password = '';
  private loginMethods = [
    {
      name: 'Facebook',
      src: 'static/pngs/ic-facebook.png',
    },
    {
      name: 'Twitter',
      src: 'static/pngs/ic-twitter.png',
    },
    {
      name: 'Google',
      src: 'static/pngs/ic-google.png',
    },
    {
      name: 'Wechat',
      src: 'static/pngs/ic-wechat.png',
    },
    {
      name: 'QQ',
      src: 'static/pngs/ic-qq.png',
    },
    {
      name: 'Weibo',
      src: 'static/pngs/ic-weibo.png',
    },
  ];

  created() {
    console.log('Login View');
  }

  findPassword() {
    console.log('test');
  }

  onRegisterClick() {
    this.$router.push({ name: 'Register' });
  }

  login() {
    electron.ipcRenderer.sendSync('loginFinish', '');
  }
}
</script>
<style lang="stylus" scoped>
.find-password {
  color: $primary;
  cursor: pointer;
  font-size: 12px;
}

.login-methods {
  color: #7F8790;

  .register {
    color: $primary;
    cursor: pointer;
  }
}
</style>
